import { defaultSettings, DeviceEnum, SidebarStatusEnum } from "@/settings";
// 导入 Element Plus 语言包
import zhCn from "element-plus/es/locale/lang/zh-cn";
import en from "element-plus/es/locale/lang/en";
import vi from "element-plus/es/locale/lang/vi";
import th from "element-plus/es/locale/lang/th";
import { store } from "@/stores";

// setup
export const useAppStore = defineStore("app", () => {
  // state
  const device = useStorage("device", DeviceEnum.DESKTOP);
  const size = useStorage("size", defaultSettings.size);
  let lang = navigator.language || navigator.userLanguage;//常规浏览器语言和IE浏览器
  let getLang = localStorage.getItem('language')
  if (!getLang) {
    lang = lang.split('-')[0]
  } else {
    getLang = getLang.split('-')[0]
  }
  const language = useStorage("language", getLang || lang);
  const sidebarStatus = useStorage("sidebarStatus", SidebarStatusEnum.CLOSED);

  const sidebar = reactive({
    opened: sidebarStatus.value === SidebarStatusEnum.OPENED,
    withoutAnimation: false,
  });
  const activeTopMenuPath = useStorage("activeTopMenuPath", "");
  /**
   * 根据语言标识读取对应的语言包
   */
  const locale = computed(() => {
    if (language?.value == "en") {
      return en;
    } else if (language?.value == "vi") {
      return vi;
    } else if (language?.value == "th") {
      return th;
    } else {
      return zhCn;
    }
  });

  // actions
  function toggleSidebar () {
    sidebar.opened = !sidebar.opened;
    sidebarStatus.value = sidebar.opened ? SidebarStatusEnum.OPENED : SidebarStatusEnum.CLOSED;
  }

  function closeSideBar () {
    sidebar.opened = false;
    sidebarStatus.value = SidebarStatusEnum.CLOSED;
  }

  function openSideBar () {
    sidebar.opened = true;
    sidebarStatus.value = SidebarStatusEnum.OPENED;
  }

  function toggleDevice (val) {
    device.value = val;
  }

  function changeSize (val) {
    size.value = val;
  }
  /**
   * 切换语言
   *
   * @param val
   */
  function changeLanguage (val) {
    language.value = val;
  }
  /**
   * 混合模式顶部切换
   */
  function activeTopMenu (val) {
    activeTopMenuPath.value = val;
  }
  return {
    device,
    sidebar,
    language,
    locale,
    size,
    activeTopMenu,
    toggleDevice,
    changeSize,
    changeLanguage,
    toggleSidebar,
    closeSideBar,
    openSideBar,
    activeTopMenuPath,
  };
});

// 手动提供给 useStore() 函数 pinia 实例
// https://pinia.vuejs.org/zh/core-concepts/outside-component-usage.html#using-a-store-outside-of-a-component
export function useAppStoreHook () {
  return useAppStore(store);
}
